'use strict';

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, TouchableNativeFeedback } from 'react-native';
import PropTypes from 'prop-types';
import GlobalStyles from '../../style/GlobalStyles';

export default {
    HeightLight: class HeightLight extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }

        static propTypes = {
            title: PropTypes.string, // 按钮文字
            btnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), // 按钮样式
            btnText: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), // 按钮文字样式
            onPress: PropTypes.func // 点击事件
        };
        static defaultProps = {
            btnStyle: [],
            btnText: []
        };

        render() {
            const { onPress, btnStyle, btnText, title, activeOpacity } = this.props;
            return (
                <TouchableHighlight
                    activeOpacity={activeOpacity}
                    onPress={onPress}>
                    <View style={[styles.touchButton, ...btnStyle]}>
                        <Text style={[styles.touchButtonText, ...btnText]}>{title}</Text>
                    </View>
                </TouchableHighlight>
            );
        }
    },
    NativeFeedback: class NativeFeedback extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }

        static propTypes = {
            title: PropTypes.string, // 按钮文字
            btnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), // 按钮样式
            btnText: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), // 按钮文字样式
            onPress: PropTypes.func // 点击事件
        };
        static defaultProps = {
            btnStyle: [],
            btnText: []
        };

        render() {
            const { onPress, btnStyle, btnText, title } = this.props;
            return (
                <TouchableNativeFeedback
                    onPress={onPress}>
                    <View style={[styles.touchButton, ...btnStyle]}>
                        <Text style={[styles.touchButtonText, ...btnText]}>{title}</Text>
                    </View>
                </TouchableNativeFeedback>
            );
        }
    }
};

const styles = StyleSheet.create({
    touchButton: {
        backgroundColor: GlobalStyles.MAIN_COLOR,
        justifyContent: 'center',
        overflow: 'hidden'
    },
    touchButtonText: {
        color: 'white',
        textAlign: 'center',
        fontSize: GlobalStyles.FONT_SIZE
    }
});
